<template>
 <view class="confirmation">
  <view  v-for="(item,index) in unconfirmed" :key="index">
   <view class="debt" @click="debtDetails(item)">
   	<view class="d-f top">
		<view class="prevtime">{{item.createtime}}	</view>
     <view class="query">待确认</view>
   	</view>
   	<view class="center d-f">
   		<view class="fund">
   			{{item.loan_money}}￥
   		</view>
   		<view class="obligee d-f-j-c-a-i">
   			债务人：{{item.obligor.username}}
   		</view>
   	</view>
   	<view class="bottom">
   		<view >年化利率：{{item.year_rate}}%</view>
   		<view >{{item.loan_date}}-{{item.repay_date}}</view>
   	</view>
   </view>
  </view>
  <u-loadmore :status="nostatus" :icon-type="iconType" margin-top="10" :load-text="loadText" v-if="unconfirmed.length>5" />
 </view>
</template>

<script>
	import {
		mapState,mapActions,mapMutations
	} from 'vuex'

 export default {
   data () {
     return {
       iconType: 'flower',
	   values:{
		   	state: 0,
			name: '',
			order: '',
			page:1,
			page_size:5
	   },
      	loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
     }
   },
   components: {

   },
   methods: {
	   ...mapMutations({
         changeNoStatus:'MAY_DEBT/CHANGE_NO_STATUS'
	   }),
    ...mapActions({
		getConfirmed:'MAY_DEBT/GET_CONFIRMED',
		getConfirmedMore:'MAY_DEBT/GET_CONFIRMED_MORE',
	}),
	debtDetails(item){
		 uni.navigateTo({
		     url: `/pages/creditor/personam/receiptDetails?id=${item.id}`
		 });
	}
   },
   mounted() {
	   this.changeNoStatus('loadmore')
	   this.values.page=1
    this.getConfirmed(this.values)
   },
   onReachBottom(){
  if (this.values.page_size * this.values.page < this.unTotal) {
					this.values.page = this.values.page  + 1
					this.changeNoStatus('loading')
					this.getConfirmedMore(this.values)
					
				} else {
					this.changeNoStatus('nomore')
					
				}
   },
   watch: {

   },
   computed: {
    ...mapState({
		unconfirmed: (state) => state.MAY_DEBT.unconfirmed, //债务数组
		nostatus:(state) => state.MAY_DEBT.nostatus,
		unTotal:(state) => state.MAY_DEBT.unTotal,
	})
   }
 }
</script>

<style scoped lang='scss'>
	@import '@/common/confirmation.scss';
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>